<template>
    <!-- <VEmojiPicker></VEmojiPicker> -->
    <Swiper class="swiper" :slides-per-view="'auto'" pagination="" autoplay="false" :scrollbar="{draggable: true}" mousewheel keyboard
        :modules="modules" :space-between="0" direction="vertical" @swiper="onSwiper" @slideChange="onSlideChange">
        <SwiperSlide>
            <video ref="videoPlayer" id="videoPlayer" class="video-js" style="margin: auto auto"></video>
            <div ref="test">123</div>
        </SwiperSlide>
        <SwiperSlide>Slide 2</SwiperSlide>
        <SwiperSlide>Slide 3</SwiperSlide>
        <SwiperSlide>Slide 4</SwiperSlide>
        <SwiperSlide>Slide 5</SwiperSlide>
    </Swiper>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
/**
 * @Author dingxing [2023-02-28 11:39:07]
 * @Description 
 */
import { Pagination, Scrollbar, Mousewheel, Keyboard, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';

import videojs from 'video.js'
import "video.js/dist/video-js.css"
let msg = ref('');
let modules = reactive([Pagination, Scrollbar, Mousewheel, Keyboard, Autoplay])
const onSwiper = (swiper) => {
    cl('init swiper');
    cl('123', 123);
};
const onSlideChange = (swiper) => {
    cl(swiper.realIndex)
    cl(swiper.activeIndex)
};
const videoPlayer = ref(null);
const test = ref(null);
const myPlayer = ref(null);
onMounted(() => {
    msg.value = 'hello word';
    console.log(videoPlayer,myPlayer)
    console.log(test.value.innerHTML)
    myPlayer.value = videojs(videoPlayer.value, {
        poster: "//vjs.zencdn.net/v/oceans.png",
        controls: true,
        sources: [
            {
                src: "//vjs.zencdn.net/v/oceans.mp4",
                type: 'video/mp4',
            }
        ],
        controlBar: {
            remainingTimeDisplay: {
                displayNegative: false
            }
        },
        playbackRates: [0.5, 1, 1.5, 2]
    }, () => {
        myPlayer.value.log("play.....")
    })

});
</script>

<style lang="less" scoped>
.swiper {
    height: 100vh;

    .swiper-slide {
        height: 100% !important;
    }
}
</style>